window.onload = function () {
    let oPic = document.getElementById("pic");
    let oCss = document.getElementById("css");
    let iLiW = 25;
    let iLength = oPic.clientWidth / iLiW;
    let aLi = [];
    let sHtml = "";
    let sCss = "";
    let iZindex = 0;
    for (let i = 0; i < iLength; i++) {
        i > iLength / 2 ? iZindex-- : iZindex++;
        sCss += ".picList li:nth-of-type(" + (i + 1) + "){z-index:" + iZindex + ";}.picList li:nth-of-type(" + (i + 1) + ") a{background-position:-" + i * iLiW + "px 0px;}"
    }
    oCss.innerHTML += sCss;
    for (let i = 0; i < iLength; i++) {
        sHtml += '<li><a href="javascript:void(0);"></a><a href="javascript:void(0);"></a><a href="javascript:void(0);"></a><a href="javascript:void(0);"></a><span></span><span></span></li>';
    }
    oPic.innerHTML = sHtml;
    aLi = oPic.getElementsByTagName("li");

    let index = 1;
    setInterval(function () {
        if (index === 4) {
            index = 0;
        }
        for (let i = 0; i < aLi.length; i++) {
            aLi[i].style.transition = 0.5 + "s " + i * 80 + "ms all ease";
            aLi[i].style.WebkitTransform = "translateZ(-135px) rotateX(-" + index * 90 + "deg)";
        }
        index++;
    }, 3000);

};